<template>
  <div>
    <van-circle
      v-model="currentRate"
      layer-color="#ebedf0"
      size="50px"
      :rate="percentage"
      :speed="100"
      :text="text"
    />
  </div>
</template>

<script>
import { mendZero } from "../../utils/commonality";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      totalTime: 20 * 60,
      nowTime: 20 * 60,
      currentRate: 30
    };
  },
  computed: {
    text() {
      let minute = Math.floor(this.nowTime / 60);
      let second = this.nowTime % 60;
      this.setTimes(this.nowTime);
      return mendZero(minute) + ":" + mendZero(second);
    },
    percentage() {
      return Math.floor((this.nowTime / this.totalTime) * 100);
    }
  },
  methods: {
    ...mapMutations("exam", ["setTimes"])
  },
  mounted() {
    let timeOut;
    timeOut = setInterval(() => {
      this.nowTime -= 10;
      if (this.nowTime == 0) {
        clearInterval(timeOut);
      }
    }, 1000);
  }
};
</script>

<style>
</style>